/*
 * Created: 2022-08-27 13:14:00
 * Author : 涛涛涛
 */

import React, { FC } from 'react';
import { View, Text } from '@tarojs/components';
import { styled } from 'linaria/react';
import { useClassName } from '@/utils/index';
import { useDownTime } from './useDownTime';
export interface IProps extends ICompProps {}
DownTime.defaultProps = {} as Partial<IProps>;
function DownTime(props: IProps) {
    const { className, style } = props;
    const localClassName = useClassName('DownTime', className);
    const { downTime } = useDownTime();
    const CompTimeItem = ({ num, unit }: { num: string; unit: string }) => (
        <View className="time-item">
            <Text className="time-item-num">{num}</Text>
            <Text className="time-item-unit">{unit}</Text>
        </View>
    );
    return (
        <RootView className={localClassName} style={style}>
            <View className="name">倒计时:</View>
            <View className="time-group">
                <CompTimeItem num={downTime.hour} unit="小时" />
                <CompTimeItem num={downTime.minute} unit="分" />
                <CompTimeItem num={downTime.second} unit="秒" />
            </View>
        </RootView>
    );
}
export default React.memo(DownTime as FC<IProps>);
const RootView = styled(View)`
    &.DownTime {
        margin-top: 30px;
        line-height: 1;
        .name {
            font-size: 24px;
        }
        .time-group {
            margin-top: 20px;
            display: flex;
            .time-item {
                flex-grow: 0;
                .time-item-num {
                    font-weight: 600;
                    font-size: 28px;
                }
                .time-item-unit {
                    margin-left: 6px;
                    font-size: 24px;
                }
            }
            .time-item + .time-item {
                margin-left: 40px;
            }
        }
    }
`;
